<template>
    <!--配合specTree.vue使用-->
    <view class="spec-tree-item">
        <view v-if="noLast">
            <!-- 不是最后一组规格 -->
            <view class="sku-item">
                <view class="sku-item-title"
                    ><text>{{ getTreeData[0].AttributeName }}：</text></view
                >
                <view class="sku-item-select">
                    <view
                        v-for="(item, index) in getTreeData"
                        :key="index"
                        class="btn btn-gray-fill"
                        :class="activeIndex === index ? 'btn-success-fill' : ''"
                        @click="_clickEvent(item, index)">
                        {{ item.ValueStr }}
                    </view>
                </view>
            </view>
            <view
                v-if="getTreeData[0].ProductAttrList && getTreeData[0].ProductAttrList.length > 0"
                class="spec-sub-tree">
                <!--SpecTreeItem组件中调用SpecTreeItem组件-->
                <!-- 根据上级规格的数量创建多个item，根据上级规格选中的项来显示对应的下级规格栏-->
                <view v-for="(item, index) in getTreeData" v-show="activeIndex === index" :key="index">
                    <SpecTreeItemDetail
                        :tree-data="item.ProductAttrList"
                        :active-id="activeId"
                        :min-num="minNum"
                        :limit-buy="limitBuy"
                        @treeClickEvent="treeClickEvent"
                        @setCarListFunc="setCarListFunc"
                        :tempType="tempType" />
                </view>
            </view>
        </view>
        <view v-else>
            <view class="sku-item-title" v-if="getTreeData[0] && getTreeData[0].AttributeName"
                ><text>{{ getTreeData[0].AttributeName }}：</text></view
            >
            <view class="lastItem">
                <view v-for="(item, index) in getTreeData" :key="index" v-if="item.SkuModel && item.ValueStr">
                    <view class="sku-item">
                        <view class="sku-item-select">
                            <view
                                class="btn btn-gray-fill"
                                :class="activeIndex === index ? 'btn-success-fill' : ''"
                                @click="_clickEvent(item, index)">
                                {{ item.ValueStr }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="num-item">
                <text class="num-item-text">购买数量</text>
                <view>
                    <view class="bottom-box" v-for="(item, index) in getTreeData" :key="index" v-if="item.SkuModel">
                        <view class="input-number-box" v-if="activeIndex === index">
                            <button
                                class="btn btn-minus"
                                :class="item.Amount <= 0 ? 'color-shadow' : ''"
                                @click="
                                    changeAmount(
                                        item,
                                        item.Amount,
                                        item.Stock,
                                        -1,
                                        minNum,
                                        item.Ratio,
                                        limitBuy,
                                        item.AddNum,
                                    )
                                ">
                                <text>-</text>
                            </button>
                            <view class="btn-input-box">
                                <input
                                    v-model="item.Amount"
                                    type="digit"
                                    class="btn-input"
                                    @blur="
                                        changeAmount(
                                            item,
                                            item.Amount,
                                            item.Stock,
                                            0,
                                            minNum,
                                            item.Ratio,
                                            limitBuy,
                                            item.AddNum,
                                        )
                                    " />
                            </view>
                            <button
                                class="btn btn-plus"
                                :class="
                                    item.Amount * item.Ratio >= item.Stock ||
                                    (item.Amount * item.Ratio >= limitBuy && limitBuy > 0)
                                        ? 'color-shadow'
                                        : ''
                                "
                                @click="
                                    changeAmount(
                                        item,
                                        item.Amount,
                                        item.Stock,
                                        1,
                                        minNum,
                                        item.Ratio,
                                        limitBuy,
                                        item.AddNum,
                                    )
                                ">
                                <text>+</text>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex"
import SpecTreeItemDetail from "@/pages_shop/components/product/spec-tree-detail-item.vue"

import utilsOld from "@/utils/utilsOld.js"
import { getAmountInTempCart } from "@/utils/tempCartUtil.js"
export default {
    name: "SpecTreeItemDetail",
    components: {
        SpecTreeItemDetail,
    },
    props: {
        treeData: {
            type: Array,
            default() {
                return []
            },
        },
        activeId: {
            type: Number,
            default: -1,
        },
        minNum: {
            type: Number,
            default: 0,
        },
        limitBuy: {
            type: Number,
            default: 0,
        },
        isSingle: {
            type: Boolean,
            default: false,
        },
        tempType: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            activeIndex: -1,
            numValue: 0,
            noLast: false,
            getTreeData: [],
            currentItem: {},
        }
    },
    watch: {
        //监听购物车数据
        getCartData(data) {
            this.currentItem.Amount = 0
            this.$forceUpdate()
            this.setCarListFunc(this.currentItem)
        },
        //监听临时购物车数据
        getTempCartData(data) {},
    },
    computed: {
        ...mapGetters(["getCartData", "getTempCartData"]),
    },
    mounted() {
        this.getTreeData = this.treeData
        this.noLast =
            this.getTreeData &&
            this.getTreeData.length > 0 &&
            this.getTreeData[0].ProductAttrList &&
            this.getTreeData[0].ProductAttrList.length > 0

        this._clickEvent(this.getTreeData[0], 0)
    },
    methods: {
        //获取购买数量
        getAmount(num) {
            return num
        },
        // 节点点击事件
        _clickEvent(item, index) {
            item.Amount = 0
            this.currentItem = item
            this.activeIndex = index

            // 如果有传递事件函数，则调用事件函数并传递当前节点数据及组件
            this.treeClickEvent(item, index)
        },
        changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum) {
            const _oldAmount = item.Amount
            utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)
            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.ValueId = item.ValueId
                _obj.Ratio = item.Ratio
                // _obj.AttributeName = item.AttributeName

                // 同步多规格要加入购物车的数据
                this.setCarListFunc(_obj)
                this.$forceUpdate()
            }
        },
        setCarListFunc(obj) {
            this.$emit("setCarListFunc", obj)
            this.$forceUpdate()
        },
        treeClickEvent(item, index) {
            this.setCarListFunc(item)
            this.$emit("treeClickEvent", item, index)
        },
    },
}
</script>
<style lang="scss" scoped>
.spec-tree-item {
    .sku-item {
        display: flex;
        flex-direction: column;

        .sku-item-title {
        }

        .sku-item-select {
            display: flex;
            flex-direction: row;
            margin: 20rpx 0;

            .btn {
                min-width: 100rpx;
                border-radius: $border-radius-10;
                margin-right: 20rpx;
            }
        }
    }

    .num-title {
        display: flex;
        flex-direction: row;
        margin-bottom: 20rpx;
        border-top: solid 1rpx $app-color-input-bg;

        text {
            display: flex;
            flex: 1;
        }
        .buy-num {
            justify-content: center;
        }
    }
}
.lastItem {
    display: flex;
}
.bottom-box {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
}
.num-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .num-item-text {
        display: flex;
        flex: 1;
        color: $app-color-text-tip;
    }
}
.input-number-box {
    .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        text {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
        }
    }
}
</style>
